<template>
<div> 
    <!--<scroller v-show="scrollConf.scrollerShow" v-model="scrollerStatus" height="-46" lock-x scrollbar-y ref="scroller" :bounce="scrollerBounce" :use-pullup="scrollerUpUse" :use-pulldown="scrollerDownUse" :pullup-config="scrollerUpConfig" :pulldown-config="scrollerDownConfig" @on-pullup-loading="getListInfo()" @on-pulldown-loading="refreshListInfo()" class="heightPer100">-->
    <scroller v-show="scrollerShow" height="-46" lock-x scrollbar-y ref="scroller" :bounce="scrollerBounce" :use-pullup="scrollerUpUse" :use-pulldown="scrollerDownUse" :pullup-config="scrollerUpConfig" :pulldown-config="scrollerDownConfig" @on-pullup-loading="getListInfo" @on-pulldown-loading="refreshListInfo" @on-scroll-bottom="test"  class="heightPer100">
        <div class="box2 flex-item-1">
            <!-- 商品列表  -->
            <div class="weui-panel  weui-panel_access  clearfix">
                <div v-for="(list, index) in listData.list" :key="index"  class="weui-panel_bd">
                    <div class="list_item_pic">
                        <a :href="`/#/goods/${list.productId}?channelCode=${list.channelCode}`" class="weui-media-box  weui-media-box_appmsg">
                            <x-img :webp-src="`${list.imgUrl_300_300}`" class="ximg-demo" :offset="-100" container="#vux_view_box_body"></x-img>
                        </a>
                    </div>
                    <div class='zong'>
                        <div class="weui-media-box_bd">
                            <h4>{{list.brandName}}</h4> 
                            <p>{{list.productName}}</p>
                            <strong>￥{{list.salesPrice}}</strong>
                            <del>￥{{list.marketPrice}}</del>
                            <span>{{list.discount/10}}折</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </scroller>
    <loading v-model="loadingShow" :text="loadingText"></loading>
</div>
</template>

<script>
import { XImg, Scroller, Divider, Spinner, XButton, Group, Cell, Loading } from 'vux'
import './css/listInfo.scss'
import '../../../style/base.css'
export default {
    components: {
        XImg,
        Scroller,
        Divider,
        Spinner,
        XButton,
        Group,
        Cell,
        Loading
    },
    props: {
        listData: {
            default: function() {
                return []
            }
        },
        scrollConf: {
            default: function() {
                return []
            }
        }
    },
    data () { 
        return {
            scrollTop: 0,
            scrollerShow: false,
            scrollerStatus: {
                pullupStatus: 'default'
            },
            scrollerBounce: false,
            scrollerUpUse: true,
            scrollerUpConfig: {
                content: '请上拉加载数据',
                pullUpHeight: 60,
                height: 40,
                autoRefresh: false,
                downContent: '释放后加载',
                upContent: '请上拉加载更多',
                loadingContent: '加载中...',
                clsPrefix: 'xs-plugin-pullup-'
            },
            scrollerDownUse: false,
            scrollerDownConfig: {
                content: '下拉刷新',
                height: 60,
                autoRefresh: false,
                downContent: '下拉刷新',
                upContent: '释放后更新',
                loadingContent: '加载中...',
                clsPrefix: 'xs-plugin-pulldown-'
            },
            loadingShow: true,
            loadingText: '加载中'
        }
    },
    mounted() {
        // console.log(this.$props.scrollConf)
        this.getListInfo({currentPage: 1})
        // console.log(this.$props.scrollConf)
        this.$nextTick(() => {
            this.$refs.scroller.reset({top: 0})
        })
    },
    methods: {
        test() {
            console.log(4567890)
        },
        getListInfo (params) {
            this.scrollerShow = false
            this.loadingShow = true
            params = params || {}
            this.$emit('getListInfo', params)
            if (params.currentPage !== 1) {
                this.$nextTick(() => {
                    this.$refs.scroller.reset()
                    this.$refs.scroller.donePullup()
                })
            }
            this.scrollerShow = true
            this.loadingShow = false
        },
        refreshListInfo () {
            this.$emit('getListInfo', {currentPage: 1})
            this.$nextTick(() => {
                this.$refs.scroller.reset({top: 0})
                this.$refs.scroller.donePulldown()
            })
        }
    },
    activated() {
        this.$refs.scroller.reset()
    } 
}
</script>

